<template>
    <van-form ref="addForm">
        <van-field v-model="formData.follower" required name="姓名" label="姓名" maxlength="32" type="text" placeholder="请输入姓名" :rules=rules.follower />
        <van-field name="来访人性别" label="性别">
            <template #input>
                <van-radio-group v-model="formData.followerSex" direction="horizontal">
                    <van-radio :name="item.value" v-for="item in sexList" :key="item.value">{{item.name}}</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <van-field v-model="formData.followerPhone" required name="手机号" label="手机号" maxlength="11" type="text" placeholder="请输入手机号" :rules=rules.followerPhone />
        <van-field v-model="formData.visitorCertNo" required name="证件号码" label="证件号码" maxlength="18" type="text" placeholder="请输入证件号码" :rules=rules.visitorCertNo>
            <template #label>
                <van-dropdown-menu class="typeMenu">
                    <van-dropdown-item v-model="formData.visitorCertType" :options="certTypeList" />
                </van-dropdown-menu>
            </template>
        </van-field>
        <van-field v-model="formData.visitorCorpName" required name="来访单位" label="来访单位" maxlength="128" type="text" placeholder="请输入来访单位" :rules=rules.visitorCorpName />
        <van-field name="uploader" label="照片">
            <template #input>
                <uploadCom ref="uploadRef" :maxNumber="1" @uploadFiles="uploadFiles" accept=".jpg,.jpeg,.png"></uploadCom>
            </template>
        </van-field>
        <van-button type="info" color="#4eb3e9" size="large" @click="handleSave">保存</van-button>
    </van-form>
</template>

<script>
    import { queryDic } from '@api/common';

    export default {
        data () {
            return {
                showTypePicker: false,
                formData: {
                    follower: '',
                    followerSex: '',
                    followerSexName: '',
                    followerPhone: '',
                    visitorCertType: '',
                    visitorCertTypeName: '',
                    visitorCertNo: '',
                    visitorCorpName: '',
                    visitorPic: '',
                    url: ''
                },
                rules: {
                    follower: [
                        { required: true, message: '请输入姓名', trigger: 'onBlur' },
                        { pattern: this.$commonReg.textReg, message: this.$commonReg.textMsg, trigger: 'onBlur' }
                    ],
                    followerPhone: [
                        { required: true, message: '请输入手机号', trigger: 'onBlur' },
                        { pattern: this.$commonReg.phoneReg, message: this.$commonReg.phoneMsg, trigger: 'onBlur' }
                    ],
                    visitorCertNo: [
                        { required: true, message: '请输入证件号码', trigger: 'onBlur' }
                    ],
                    visitorCorpName: [
                        { required: true, message: "请输入来访单位", trigger: "onBlur" },
                        { pattern: this.$commonReg.textReg, message: this.$commonReg.textMsg, trigger: 'onBlur' }
                    ]
                },
                sexList: [], // 性别
                certTypeList: []
            };
        },
        created () {
            this.getDicData();
        },
        methods: {
            // 保存
            handleSave () {
                this.$refs.addForm.validate().then(() => {
                    this.certTypeList.forEach(item => {
                        if (item.value === this.formData.visitorCertType) {
                            this.formData.visitorCertTypeName = item.name;
                        }
                    })
                    this.sexList.forEach(item => {
                        if (item.value === this.formData.followerSex) {
                            this.formData.followerSexName = item.name;
                        }
                    })
                    this.$emit('sendForm', this.formData);
                    this.$emit('close');
                })
            },
            // 附件上传
            uploadFiles (arr) {
                this.formData.visitorPic = arr[0].fileCode;
                this.formData.url = arr[0].url;
            },
            // 重置表单
            resetForm () {
                this.formData = {
                    follower: '',
                    followerSex: '',
                    followerSexName: '',
                    followerPhone: '',
                    visitorCertType: '',
                    visitorCertNo: '',
                    visitorPic: '',
                    url: ''
                }
                this.$refs.uploadRef.reset();
                setTimeout(() => {
                    this.$refs.addForm.resetValidation();
                    if (this.certTypeList.length) {
                        this.formData.visitorCertType = this.certTypeList[0].value;
                    }
                    if (this.sexList.length) {
                        this.formData.followerSex = this.sexList[0].value;
                        this.formData.followerSexName = this.sexList[0].name;
                    }
                })
            },
            // 标准代码
            getDicData () {
                // 证件类型
                queryDic('CERT_TYPE_CODE').then(res => {
                    if (res.code === 1000 && res.data) {
                        this.certTypeList = res.data;
                        if (this.certTypeList.length) {
                            this.formData.visitorCertType = this.certTypeList[0].value;
                        }
                    }
                })
                // 性别
                queryDic('SEX_FLAG_CODE').then(res => {
                    if (res.code === 1000 && res.data) {
                        this.sexList = res.data.filter(item => item.value !== '3');
                        if (this.sexList.length) {
                            this.formData.followerSex = this.sexList[0].value;
                            this.formData.followerSexName = this.sexList[0].name;
                        }
                    }
                })
            }
        },
    };
</script>

<style scoped lang="less">
    .van-button--large {
        height: 40px;
        line-height: 40px;
    }
    .typeMenu {
        /deep/.van-dropdown-menu__bar {
            height: 20px;
            line-height: 20px;
            box-shadow: none;
            font-size: 13px;
            .van-dropdown-menu__title::after {
                border-color: transparent transparent #272c30 #272c30;
            }
            .van-dropdown-menu__title {
                padding-left: 0;
                font-size: 14px;
                color: #646566;
            }
            .van-dropdown-menu__item {
                justify-content: flex-start;
            }
        }
    }
</style>